<template>
  <div>
    <div id="newMain" style="width: 600px;height:400px; margin: 0 auto; display: flex; justify-content: center;"></div>
    <div id="pieChart" style="width: 600px;height:400px; margin: 0 auto; display: flex; justify-content: center;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    var myChart = echarts.init(document.getElementById('newMain'));
    myChart.setOption({
      title: {
        text: '当月各商品销售额'
      },
      tooltip: {},
      xAxis: {
        data: ['零食','洗漱用品','生鲜','酒类'],
        
      },
      yAxis: {},
      series: [
        {
          name: '新销量',
          type: 'line',
          data: [5210, 2600,3860,1070]
        }
      ]
    });

    
    var pieChart = echarts.init(document.getElementById('pieChart'));
    pieChart.setOption({
      title: {
        text: '当月各商品销售数量'
      },
      tooltip: {},
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data: [
            {value: 5210, name: '零食'},
            {value: 2600, name: '洗漱用品'},
            {value: 3860, name: '生鲜'},
            {value: 1070, name: '酒类'}
          ]
        }
      ]
    });
  }
}


</script>
